Using Absolute Layout Containers in Responsive Design
Description
For mobile applications it can be useful to have an absolute layout container that has one layout when held vertically, in "portrait" mode, and another design when held horizontally, in "landscape" mode.
Build an AbsoluteLayout Container with Responsive Design
In the UX Builder on the UX Controls page check the 'Mobile' checkbox in the Controls page's toolbar.
Open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the textbox the name and label of 'firstname'.
Add five more [TextBox] controls to the component with the names and labels of 'lastname', 'address', 'city', 'state', and 'zip'.
Highlight all of the controls in the controls tree. Open the 'Containers' menu and click on the [Container] option.
From the 'Container Type' list select the 'AbsoluteLayout' option and click OK.
Highlight the opening absolute layout tag, [AbsoluteLayout: ABSOLUTELAYOUT_1].
In the properties list on the right in the 'Container Begin Properties' section click the [...] button next to the 'Absolute positions for controls' property.
The Set Absolute Position and Size editor will open. Highlight the firstname control in the list of controls on the left.
A dotted rectangular line in the middle pane denotes the area of the layout to be displayed. Place the mouse cursor inside the layout and hold down the left mouse button to add the control to the layout. Drag the mouse, with the left button held down, in order to size the control. Click OK to close the editor.
Once the responsive layout is added this default layout will be hidden.Highlight everything in the controls tree, the AbsoluteLayout container and all of the textbox controls. Open the 'Panels' menu and click on the [Panel Card] option. Click 'Insert Around' in order to add a panel card around the absolute layout.
The controls tree:
Open the UX Properties page. Scroll down the properties list to the 'Responsive Layout Settings' section and click the [...] button next to the 'Responsive layout settings' property.
In the 'Responsive Layout Genie' click the 'Load rule set' hyperlink.
Select the 'System:landscape-portrait' option in the 'Select Rules Set' dialog. Click OK.
Highlight the 'landscape' rule that was added to the step 1 section.
Click the 'Add Action' button at the bottom of the responsive layout genie.
Select the 'Define position/size for controls in an AbsoluteLayout container' action in the 'Select Action' list. Click OK.
Highlight 'ABSOLUTELAYOUT_1' in the 'Select AbsoluteLayout Container' prompt. Click OK.
Highlight the added action in step 2. In the 'Step 3: Define Action Properties for each Rule' section click the [...] button next to the 'Absolute position for controls' in the 'Absolute Layout Settings'.
Design the absolute layout controls as you want them to appear when a device is held in 'landscape' mode. Highlight the controls that you want to add to the layout from the controls list on the left. After highlighting a control, place the mouse cursor inside the dotted layout rectangle in the middle of the editor. Hold down the left mouse button to add the control and then drag, without releasing the mouse button, to adjust the size of the control in the layout.
Use the 'Edit Selected' dropdown in the editor's toolbar to align and resize controls. After adding all of the controls click OK.
In the Responsive Layout Genie go back to the 'Step 1' section and highlight the 'portrait' rule.
In 'Step 2' highlight the 'Define position/size for controls in an AbsoluteLayout container(ABSOLUTELAYOUT_1)' action.
In 'Step 3' click on the [...] button next to the 'Absolute position for controls' property.
Adjust the layout to the size that it will appear when in portrait mode.
Highlight, drag, and drop the controls onto the layout. Design the controls as you want them to appear in portrait mode. Click OK.
Run the component in Working Preview. From the dropdown in the Working Preview select a mobile device with a vertical screen displayed. The 'portrait' AbsoluteLayout design should be displayed.
From the dropdown select the same mobile device with the screen
